import { computed, defineComponent, nextTick, reactive, ref, watch } from 'vue';

export default defineComponent({
  props: {
    image: {
      type: String,
      default() {
        return 'search';
      },
    },
    description: {
      type: String,
      default() {
        return '';
      },
    },
  },
  emits: [],

  setup(props, { attrs, emit, expose, slots }) {
    const error = () => {
      return (
        <svg viewBox='0 0 160 160'>
          <defs>
            <linearGradient x1='50%' x2='50%' y2='100%' id='van-empty-9-8'>
              <stop stop-color='#EAEDF1' offset='0%'></stop>
              <stop stop-color='#DCDEE0' offset='100%'></stop>
            </linearGradient>
          </defs>
          <defs>
            <linearGradient id='van-empty-9-a' x1='64%' y1='100%' x2='64%'>
              <stop stop-color='#FFF' offset='0%' stop-opacity='0.5'></stop>
              <stop stop-color='#F2F3F5' offset='100%'></stop>
            </linearGradient>
          </defs>
          <g opacity='.8'>
            <path
              d='M36 131V53H16v20H2v58h34z'
              fill='url(#van-empty-9-a)'
            ></path>
            <path
              d='M123 15h22v14h9v77h-31V15z'
              fill='url(#van-empty-9-a)'
            ></path>
          </g>
          <defs>
            <linearGradient
              id='van-empty-9-b'
              x1='64%'
              y1='97%'
              x2='64%'
              y2='0%'
            >
              <stop stop-color='#F2F3F5' offset='0%' stop-opacity='0.3'></stop>
              <stop stop-color='#F2F3F5' offset='100%'></stop>
            </linearGradient>
          </defs>
          <g opacity='.8'>
            <path
              d='M87 6c3 0 7 3 8 6a8 8 0 1 1-1 16H80a7 7 0 0 1-8-6c0-4 3-7 6-7 0-5 4-9 9-9Z'
              fill='url(#van-empty-9-b)'
            ></path>
            <path
              d='M19 23c2 0 3 1 4 3 2 0 4 2 4 4a4 4 0 0 1-4 3v1h-7v-1l-1 1c-2 0-3-2-3-4 0-1 1-3 3-3 0-2 2-4 4-4Z'
              fill='url(#van-empty-9-b)'
            ></path>
          </g>
          <defs>
            <radialGradient
              id='van-empty-9-c'
              cx='50%'
              cy='54%'
              fx='50%'
              fy='54%'
              r='297%'
              gradientTransform='matrix(-.16 0 0 -.33 .58 .72)'
            >
              <stop stop-color='#EBEDF0' offset='0%'></stop>
              <stop
                stop-color='#F2F3F5'
                offset='100%'
                stop-opacity='0.3'
              ></stop>
            </radialGradient>
          </defs>
          <ellipse
            fill='url(#van-empty-9-c)'
            opacity='.8'
            cx='80'
            cy='140'
            rx='46'
            ry='8'
          ></ellipse>
          <path
            d='m59 60 21 21 21-21h3l9 9v3L92 93l21 21v3l-9 9h-3l-21-21-21 21h-3l-9-9v-3l21-21-21-21v-3l9-9h3Z'
            fill='url(#van-empty-9-8)'
          ></path>
        </svg>
      );
    };

    const search = () => {
      return (
        <svg viewBox='0 0 160 160'>
          <defs>
            <linearGradient x1='50%' y1='100%' x2='50%' id='tm-empty-10-9'>
              <stop stop-color='#EEE' offset='0%'></stop>
              <stop stop-color='#D8D8D8' offset='100%'></stop>
            </linearGradient>
            <linearGradient x1='100%' y1='50%' y2='50%' id='tm-empty-10-10'>
              <stop stop-color='#F2F3F5' offset='0%'></stop>
              <stop stop-color='#DCDEE0' offset='100%'></stop>
            </linearGradient>
            <linearGradient x1='50%' x2='50%' y2='100%' id='tm-empty-10-11'>
              <stop stop-color='#F2F3F5' offset='0%'></stop>
              <stop stop-color='#DCDEE0' offset='100%'></stop>
            </linearGradient>
            <linearGradient x1='50%' x2='50%' y2='100%' id='tm-empty-10-12'>
              <stop stop-color='#FFF' offset='0%'></stop>
              <stop stop-color='#F7F8FA' offset='100%'></stop>
            </linearGradient>
          </defs>
          <defs>
            <linearGradient id='tm-empty-10-a' x1='64%' y1='100%' x2='64%'>
              <stop stop-color='#FFF' offset='0%' stop-opacity='0.5'></stop>
              <stop stop-color='#F2F3F5' offset='100%'></stop>
            </linearGradient>
          </defs>
          <g opacity='.8'>
            <path
              d='M36 131V53H16v20H2v58h34z'
              fill='url(#tm-empty-10-a)'
            ></path>
            <path
              d='M123 15h22v14h9v77h-31V15z'
              fill='url(#tm-empty-10-a)'
            ></path>
          </g>
          <defs>
            <linearGradient
              id='tm-empty-10-b'
              x1='64%'
              y1='97%'
              x2='64%'
              y2='0%'
            >
              <stop stop-color='#F2F3F5' offset='0%' stop-opacity='0.3'></stop>
              <stop stop-color='#F2F3F5' offset='100%'></stop>
            </linearGradient>
          </defs>
          <g opacity='.8'>
            <path
              d='M87 6c3 0 7 3 8 6a8 8 0 1 1-1 16H80a7 7 0 0 1-8-6c0-4 3-7 6-7 0-5 4-9 9-9Z'
              fill='url(#tm-empty-10-b)'
            ></path>
            <path
              d='M19 23c2 0 3 1 4 3 2 0 4 2 4 4a4 4 0 0 1-4 3v1h-7v-1l-1 1c-2 0-3-2-3-4 0-1 1-3 3-3 0-2 2-4 4-4Z'
              fill='url(#tm-empty-10-b)'
            ></path>
          </g>
          <defs>
            <radialGradient
              id='tm-empty-10-d'
              cx='50%'
              cy='54%'
              fx='50%'
              fy='54%'
              r='297%'
              gradientTransform='matrix(-.16 0 0 -.33 .58 .72)'
            >
              <stop stop-color='#EBEDF0' offset='0%'></stop>
              <stop
                stop-color='#F2F3F5'
                offset='100%'
                stop-opacity='0.3'
              ></stop>
            </radialGradient>
          </defs>
          <ellipse
            fill='url(#tm-empty-10-d)'
            opacity='.8'
            cx='80'
            cy='140'
            rx='46'
            ry='8'
          ></ellipse>
          <g transform='rotate(-45 113 -4)' fill='none'>
            <rect
              fill='url(#tm-empty-10-9)'
              x='24'
              y='52.8'
              width='5.8'
              height='19'
              rx='1'
            ></rect>
            <rect
              fill='url(#tm-empty-10-10)'
              x='22.1'
              y='67.3'
              width='9.9'
              height='28'
              rx='1'
            ></rect>
            <circle
              stroke='url(#tm-empty-10-11)'
              stroke-width='8'
              cx='27'
              cy='27'
              r='27'
            ></circle>
            <circle fill='url(#tm-empty-10-12)' cx='27' cy='27' r='16'></circle>
            <path
              d='M37 7c-8 0-15 5-16 12'
              stroke='url(#tm-empty-10-11)'
              stroke-width='3'
              opacity='.5'
              stroke-linecap='round'
              transform='rotate(45 29 13)'
            ></path>
          </g>
        </svg>
      );
    };

    return () => {
      return (
        <div
          style='height: 100%;display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    padding: 32px 0;'
        >
          <div style='width:160px; height: 160px;' class='tm-empty__image'>
            {props.image == 'search' ? search() : error()}
          </div>
        </div>
      );
    };
  },
});
